<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('交易信息')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <label>收款人地址</label>
                <input type="text" class="form-control" id="to">
                <label>交易金额</label>
                <input type="text" class="form-control" id="amount">
                <label>付款人私钥</label>
                <input type="text" class="form-control" id="priKey">
                <label>附加数据</label>
                <input type="text" class="form-control" id="data">
                <button th:text="发送交易" class="btn btn-success" th:onclick="send_transaction()"/>
                <span/>
            </div>
        </div>
        <br/>
        <div class="panel panel-default">
            <div class="panel-heading">
                <label>交易哈希</label>
                <input type="text" class="form-control" id="txHash">
                <button th:text="交易查询" class="btn btn-primary" th:onclick="get_transaction()"/>
                <span/>
                <table class="table">
                    <thead id="transactionlist">
                    <tr>
                        <th>
                            付款人地址
                        </th>
                        <th>
                            收款人地址
                        </th>
                        <th>
                            交易 Hash 值
                        </th>
                        <th>
                            交易金额
                        </th>
                        <th>
                            交易状态
                        </th>
                        <th>
                            附加数据
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <br/>
    </div>

</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">


    function send_transaction() {
        $.ajax({
            type: "POST",
            url: "http://localhost/api/transaction/send_transaction",
            dataType: "json",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                "to": $("#to").val(),
                "amount": $("#amount").val(),
                "priKey": $("#priKey").val(),
                "data": $("#data").val()
            }),
            success: function (data) {
                if (data.message == "SUCCESS" && data.item.length == "66") {
                    var str = "请记住txhash，方便查询交易\n";
                    alert("交易成功\n"+str+data.item);
                }else {
                    alert("交易失败"+data.message);
                }
            },
            error: function (data) {
                alert("交易失败");
            }
        });
    }

    function get_transaction() {
        $.ajax({
            type: "GET",
            url: "http://localhost/api/transaction/get_transaction",
            data: {txHash: $("#txHash").val()},
            dataType: "json",
            success: function (data) {
                if (data.message == "SUCCESS") {
                    $("#transactionlist").nextAll().remove();

                    $("#transactionlist").after("<tr>\n" +
                        "                    <th>\n" +
                        "                        " + data.item.from + "\n" +
                        "                    </th>\n" +
                        "                    <th>\n" +
                        "                        " + data.item.to + "\n" +
                        "                    </th>\n" +
                        "                    <th>\n" +
                        "                        " + data.item.txHash + "\n" +
                        "                    </th>\n" +
                        "                    <th>\n" +
                        "                        " + data.item.amount + "\n" +
                        "                    </th>\n" +
                        "                    <th>\n" +
                        "                        " + data.item.status + "\n" +
                        "                    </th>\n" +
                        "                    <th>\n" +
                        "                        " + data.item.data + "\n" +
                        "                    </th>\n" +
                        "                </tr>");

                }
            }
        });
    }
</script>
</body>
</html>